<template>
  <div ref="chart" style="width: 600px; height: 400px"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { getChannelsAPI } from '@/api/article'

// 获取 echerts 对象
const chart = ref(null)
// 获取 文章分类 列表
const articleList = ref([])
// 只获取 文章分类 名称
const articleName = ref([])
// 只获取 文章分类 各个名称 数量总和
// const articleCount = ref([])

const getArticleList = async () => {
  const {
    data: { data }
  } = await getChannelsAPI()
  articleList.value = data
  // 只获取 文章分类 名称
  articleName.value = data.map((item) => `'${item.cate_name}'`)
  // console.log([articleName.value.join(', ')])
  // 只获取 文章分类 各个名称 数量总和
}

onMounted(async () => {
  await getArticleList()
  initChart(chart.value)
})

const initChart = (chartRef) => {
  const chart = echarts.init(chartRef)
  const option = {
    title: {
      text: '文章分类各分类名称占比',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
      // data: [articleName.join(', ')]
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [
          { value: 335, name: '直接访问' },
          { value: 310, name: '邮件营销' },
          { value: 234, name: '联盟广告' },
          { value: 135, name: '视频广告' },
          { value: 1548, name: '搜索引擎' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  let currentIndex = -1

  setInterval(function () {
    var dataLen = option.series[0].data.length
    // 取消之前高亮的图形
    chart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: currentIndex
    })
    currentIndex = (currentIndex + 1) % dataLen
    // 高亮当前图形
    chart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: currentIndex
    })
    // 显示 tooltip
    chart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: currentIndex
    })
  }, 3000)
  chart.setOption(option)
}
</script>

<style></style>
